<template>
  <div>
    <el-button type="primary" v-if="!addstate" @click="addstate = true">添加商品</el-button>
    <add v-if="addstate" @addper="add"></add>
    <div class="cont" v-if="!state">
      <el-table :data="showdata" style="width: 100%">
        <el-table-column prop="id" label="编号" width="150px"></el-table-column>
        <el-table-column prop="shopname" label="商品名字" width="150px"></el-table-column>
        <el-table-column prop="shopdesc" label="商品描述" width="150px"></el-table-column>
        <el-table-column prop="date" label="上架日期"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="change_" background :page-size="11" :total="total"></el-pagination>
    </div>
    <From v-if="state" :ruleForm="updateObj" @update="update"></From>
  </div>
</template>

<script>
import From from "./from";
import add from "./add";
export default {
  components: {
    From,
    add
  },
  data() {
    return {
      showdata: [],
      shopdata: [],
      page: 1,
      state: false,
      addstate: false,
      updateObj: {},
      obj: {}
    };
  },
  computed: {
    total() {
      return this.shopdata.length;
    }
  },
  methods: {
    change_(x) {
      this.page = x
      let staticIndex = (x - 1) * 11;
      let afterIndex = x * 11;
      this.showdata = this.shopdata.slice(staticIndex, afterIndex);
    },
    handleEdit(row) {
      this.state = true;
      this.updateObj = row;
    },
    update(x) {
      this.$http
        .put("/api/shop/updateshop", {
          data: x
        })
        .then(res => {
          if (res.status == "200") {
            this.shopdata = res.data;
            this.change_(this.page);
            this.state = false;
            this.$message({
              type: "success",
              message: "修改成功!"
            });
          }
        });
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .delete("/api/shop/delshop", {
              params: {
                id: index
              }
            })
            .then(res => {
              if (res.status == "200") {
                this.shopdata = res.data;
                this.change_(this.page);
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add(x) {
      this.$http
        .post("/api/shop/addshop", {
          data: x
        })
        .then(res => {
          if (res.status == "200") {
            this.addstate = false;
            this.shopdata = res.data;
            this.change_(this.page);
            this.$message({
              type: "success",
              message: "添加成功!"
            });
          }
        });
    }
  },
  created() {
    this.$http.get("/api/shop/mock").then(res => {
      this.shopdata = res.data;
      this.showdata = this.shopdata.slice(0, 11);
    });
  }
};
</script>

<style>
</style>